/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

//CANVAS
var coordJSON = {"tecla":" ","xlancha":20,"ylancha":20,"xbarco":0,"ybarco":0,"colision":"false"} 
//cliente
var wsUri = "ws://" + document.location.host + document.location.pathname + "escenaendpoint";
var websocket = new WebSocket(wsUri);

function iniciar(){
    var canvas = document.getElementById("canvas");
     //si la funcion getContext existe, es porque soporta canvas
	if (canvas.getContext){
		context = canvas.getContext('2d');
	} else {
		alert("tu navegador no soporta canvas");
		return;
	}
	
	if (canvas !== null){
               
                setInterval(ciclo, 100);	
                var x = 20; //arranca el juego con estas posiciones
                var y = 20;
		var tamano = 30;
		//para saber que tecla ha sido presionada
		var arriba = false;
		var abajo = false;
		var izquierda = false;
		var derecha = false;
		
		var billete_x = 20;
		var billete_y = 20;
		var billete_ancho = 30;
		var billete_alto = 30;
		var billete_color = "red";
		var reemplazar_billete = true;
		
		
		function colocar_billete(){ //necesito volver a colocar el billete para qeu deje de colisionar
			if (reemplazar_billete){
				reemplazar_billete = false;
				billete_x = Math.floor(Math.random()* (canvas.width - billete_ancho));
                                billete_y = Math.floor(Math.random()* (canvas.height - billete_alto));
			}
			
			context.fillStyle = billete_color;
			context.fillRect(billete_x, billete_y, billete_ancho, billete_alto);
		}
		
		function ciclo(){
                        context.fillStyle = "#08298A"; //color canvas
    
			context.fillRect(0, 0, canvas.width, canvas.height); //cuadrado todo el canvas fillRect(x, y, ancho, alto)
			colocar_billete();
			context.fillStyle = "#FAAC58"; //color primer cuadradito
			context.fillRect(coordJSON.xlancha, coordJSON.ylancha, tamano, tamano); //dibujamos cuadradito
                        document.addEventListener('keydown', keydown, true);
		        document.addEventListener('keyup', keyup, true);	
                        mover();
                        sendData();
			if (colision()){
                                coordJSON.colision = "true";
                                reemplazar_billete = true;//si choco tengo que separarlos sino siguen chocando
			}
                        
                        //antes del nuevo ciclo envio los datos al websocket
                        
		}
		
		function colision(){  //colision de un cuadrado con otro BUG cuando choca sigue moviendose
                        var heroe_izquierda = x; //ver un poquito este metodo
			var heroe_derecha = x + tamano;
			var heroe_fondo = y + tamano;
			var heroe_tope = y;
			var billete_izquierda = billete_x;
			var billete_derecha = billete_x + billete_ancho;
			var billete_fondo = billete_y + billete_alto;
			var billete_tope = billete_y;
			
			if (heroe_izquierda >= billete_derecha){
				return false;
			}
			if (heroe_derecha <= billete_izquierda){
				return false;
			}
			if (heroe_fondo <= billete_tope){
				return false;
			}
			if (heroe_tope >= billete_fondo){
				return false;
			}
			
			return true;
		}
		
		function mover(tecla,x,y) {
                        console.log("entro en el mover" +tecla+x+y);
                        //coordJSON.xlancha = x; no llega x e y por el websoccket
                        //coordJSON.ylancha = y;
			//si vamos a la izquierda y podemos restar 15 sin que de negativo
		   if (tecla === "izquierda" && coordJSON.xlancha >= 15){
                            //coordJSON.tecla = "izquierda";	
                            coordJSON.xlancha-=15;   
                           // x-=15;
			}
			//si vamos a la derecha y podemos sumarle 15 sin pasarno del ancho de la pagina
			if (tecla === "derecha" && coordJSON.xlancha+tamano <= (canvas.width - 15) ){
                             //coordJSON.tecla = "derecha";
                                coordJSON.xlancha+=15;   
				//x+=15;
			}
			if (tecla === "arriba" &&  coordJSON.ylancha>= 15){
                            //coordJSON.tecla = "arriba";	
                           coordJSON.ylancha-=15;   
                           // y-=15;
			}
			if (tecla === "abajo" &&  coordJSON.ylancha+tamano <= (canvas.height - 15) ){
            		 //coordJSON.tecla = "abajo";
                         coordJSON.ylancha+=15; 
                         //y+=15;
			}
			//ver si el heroe se ha topado con una moneda
			colision();
		}
		
		function keydown(e){ //pulsar
			switch(e.keyCode){
				//izquierda
				case 37:
					coordJSON.tecla = "izquierda";
                                        izquierda = true;
					break;
				//arriba
				case 38:
                            coordJSON.tecla = "arriba";		
                            arriba = true;
					break;
				//derecha
				case 39:
                                        coordJSON.tecla = "derecha";
					derecha = true;
					break;
				//abajo
				case 40:
                                        coordJSON.tecla = "abajo";
					abajo = true;
					break;
			}
		}
                //window.addEventListener('keydown', keydown, true);
		//window.addEventListener('keyup', keyup, true);
		function keyup(e){ //soltar
			switch(e.keyCode){
				//izquierda
				case 37:
					izquierda = false;
					break;
				//arriba
				case 38:
					arriba = false;
					break;
				//derecha
				case 39:
					derecha = false;
					break;
				//abajo
				case 40:
					abajo = false;
					break;
			}
		}
			
                //sendData();
		//envia a traves del websocket datos al server
                function sendData() {
                     websocket.send(JSON.stringify(coordJSON));
                    // console.log("envio al wb: + " + JSON.stringify(coordJSON));
                }
                websocket.onmessage = function (evt) { //recibir mensaje del servidor
                        //console.log("Se ha recibido un mensaje de servidor: "+ evt.data);
                        var json = JSON.parse(evt.data);
                       // console.log("llamo a mover con: "+json.tecla,json.xlancha,json.ylancha);
                        if(json.message!== null)
                           mover(json.tecla,json.xlancha,json.ylancha);//que se hace con el mensaje
                        //llamar a mover pasandole los datos tecla y las nuevas coords
                }
	   //setInterval(ciclo, 100);
	}
} 
